<template>
	<view class="content">
		<NavHeader style="width: 100%;" :isShowHeader="false" :title="title" isShowHeader>
		</NavHeader>
		<view class="main_warp">
			<c-table :headerData="headerData" :tableData="tableData">
				<template v-slot:unitName="{data}">
					<view class="font unitName">
						{{data.unitName}}
					</view>
				</template>
				<template v-slot:rzrs="{data}">
					<view class="font rzrs">
						{{data.rzrs}}
					</view>
				</template>
				<template v-slot:mzrs="{data}">
					<view class="font mzrs">
						{{data.mzrs}}
					</view>
				</template>
				<template v-slot:controls="{data}">
					<view class="font controls" @click="lookView">
						{{data.controls}}
					</view>
				</template>
			</c-table>

		</view>
	</view>
</template>

<script>
	import NavHeader from '@/components/nacigation/NavHeader.vue'
	import cTable from '@/components/cTable/cTable.vue'
	export default {
		components: {
			NavHeader,
			"c-table": cTable
		},
		data() {
			return {
				title: '人事任免工作视窗',
				headerData: [{
						width: 30,
						align: 'left',
						name: '单位名称',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						width: 20,
						align: 'left',
						name: '任职人数',
						value: 'rzrs',
						solt: 'rzrs'
					},
					{
						width: 20,
						align: 'left',
						name: '免职人数',
						value: 'mzrs',
						solt: 'mzrs'
					},
					{
						width: 20,
						align: 'left',
						name: '操作',
						value: 'controls',
						solt: 'controls'
					}
				],
				tableData: [{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					},
					{
						unitName: '市人大及其常委会市人大及其常委会',
						rzrs: 16,
						mzrs: 18,
						controls: '查看详情'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			lookView() {
				uni.navigateTo({
				    url: '/pages/personnel/details'
				});
				console.log('查看详情')
			}
		}
	}
</script>

<style scoped>
	.main_warp {
		padding: 26rpx 24rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.content-card-main {
		padding: 26rpx 32rpx 32rpx 28rpx;
	}

	.unitName {
		width: 252rpx;
		overflow: hidden;
		color: #000000;
		text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
		white-space: nowrap;
		/* 保持内容在一行显示，如果需要多行，可以移除这行 */
	}

	.font {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
	}

	.rzrs {
		width: 100rpx;
		color: #43B077;
	}

	.mzrs {
		width: 100rpx;
		color: #F22C1F;
	}

	.controls {
		width: 100rpx;
		color: #2A8BFD;
	}
</style>